<template>
	<view class="store-video">
		<block v-if="show">
			<view class="store-video-list">
				<view class="store-video-item" v-for="(data,index) in storeVideoList" :key="index" @click="goVideoInfo(data.video_id)">
					<view class="store-video-item-top">
						<image :lazy-load="true" :src="data.image" mode="aspectFill"></image>
						<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/merchant/icon9.png" class="icon"></image>
					</view>
					<view class="store-video-item-name">{{data.name}}</view>
				</view>
			</view>
			<pt-loading-more v-if="isLoading"></pt-loading-more>
			<pt-nomore v-if="noMore && storeVideoList.length"></pt-nomore>
			<pt-nothing 
				text="暂无视频" 
				v-if="noMore && !storeVideoList.length" 
				:fixed="true" 
				bgColor="#FFF" 
				icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
			</pt-nothing>
		</block>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				storeVideoList: [],
				noMore: false,
				isLoading: false,
				page: 0
			};
		},
		onLoad() {
			this.getStoreVideo()
		},
		methods: {
			// 视频列表
			getStoreVideo(){
				this.$u.api.storeVideoList({
					page: this.page,
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:1
				}).then(res => {
					this.show = true
					this.isLoading = false
					if(res.datas.length){
						res.datas.forEach(item => {
							this.storeVideoList.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			goVideoInfo(video_id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/merchant/store-video/store-video-info?video_id='+video_id
				})
			}
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.isLoading = true
				this.getStoreVideo()
			}
		}
	}
</script>

<style lang="scss">
	.store-video{
		.store-video-list{
			padding: 1rpx 30rpx 30rpx;
			.store-video-item{
				box-shadow: 0rpx 20rpx 40rpx 0 rgba(40,34,31,0.05);
				margin-top: 40rpx;
				background-color: #FFF;
				.store-video-item-top{
					position: relative;
					image{
						width: 100%;
						&.icon{
							width: 62rpx;
							height: 62rpx;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%,-50%);
						}
					}
				}
				.store-video-item-name{
					text-align: center;
					font-size: 36rpx;
					font-weight: bold;
					color: #141414;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding: 30rpx;
				}
			}
		}
	}
</style>